/*
    Babel
        语法转换器
        将ES6+语法转换为ES5语法
        将JSX语法转换为JS语法
        将TypeScript语法转换为JS语法
        原理： 将我们的代码转换（transform  ===> traverse）成 AST（抽象语法树），然后根据 AST 生成（generator）新的代码
    安装 npm install --save-dev @babel/core @babel/cli @babel/preset-env  使用阿里镜像 --registry http://registry.npmmirror.com
    cd 进入 public/babel, 使用 node 启动 index.js
*/
import Babel from '@babel/core';   // babel的核心模块
import fs from 'node:fs';        // 文件读取
import presetEnv from '@babel/preset-env';  // es6 转 es5 的核心包
import react from '@babel/preset-react';  // 转换jsx 的核心包

const file = fs.readFileSync('./test.js', 'utf-8');  // 读取文件
const code = fs.readFileSync('./app.jsx', 'utf-8');  // 要去转换jsx的语法，所以需要引入jsx的转换器，创建第二个预设, 安装npm install @babel/preset-react -D
// const result = Babel.transform(file, {       // 第一个参数是传代码， 在第二个参数中传入配置
const result = Babel.transform(code, {       // 第一个参数是传代码， 在第二个参数中传入配置
    // presets: [presetEnv]                  // 这里加上了 preset-env这个预设，就会转换语法了
    // useBuiltIns 值有 usage 和 entry 两种
    // usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需引入
    // entry 会根据配置的浏览器兼容，将所有 polyfill 都引入, 手动引入
    // corejs 3 是corejs的版本
    presets: [
        [presetEnv, { useBuiltIns: "usage", corejs: 3 }],   // 这个配置是能看到 core的底层的逻辑的，它会去判断你的代码中的方法在浏览器中支不支持，如果不支持，它会引用core重写的方法
        react            // 第二个预设
    ]
})

console.log(result.code);
